<template>
  <page-wrap stay-still :bgColor="topBg" :extraNavHeight="16">
    <view class="career-grow">
      <view class="career-grow-item">
        <view class="title">活动中心-招聘会</view>
        <RecruitmentFair></RecruitmentFair>
      </view>
      <view class="career-grow-item">
        <view class="title">职业心得-职讯</view>
        <CareerInfo ref="careerInfo" @delete="handleDelete" />
      </view>
    </view>
  </page-wrap>
</template>

<script>
import CareerInfo from "./components/CareerInfo.vue";
import RecruitmentFair from "./components/RecruitmentFair.vue";
import ShareMixin from "@/mixins/share";

export default {
  mixins: [ShareMixin],
  components: {
    CareerInfo,
    RecruitmentFair,
  },
  data() {
    return {
      loginStatus: uni.getStorageSync("login-status") || "person",
      personId: uni.getStorageSync("person-id").slice(2) || "",
      topBg: `url(${this.$imgBaseSelf}home/top_bg.png)`,
      options: {},
      activeColor: this.$primaryColor,
      shareTitle: this.$selfName + " - 职讯",
      deleteItem: {},
      deleteType: "",
      modalStyle: {},
      isModalTop: false,
      screenHeight: 0,
      arrowLeft: "",
    };
  },
  onLoad(opt) {
    this.options = opt;
  },
  mounted() {
    const { screenHeight } = uni.getSystemInfoSync();
    this.screenHeight = screenHeight;
  },
  methods: {
    handleDelete(data) {
      let { item, index, detail, type } = data;
      this.deleteItem = item;
      this.deleteType = type;
      let top = detail.y;
      let left = detail.x - 67 - 20;
      this.arrowLeft = left;

      if (top > (this.screenHeight * 2) / 3) {
        this.isModalTop = true;
        top = top - 20;
        top = this.screenHeight - top;
        this.modalStyle = {
          bottom: top + "px",
        };
      } else {
        this.isModalTop = false;
        top = top + 20;
        this.modalStyle = {
          top: top + "px",
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.career-grow {
  display: flex;
  flex-direction: column;
  &-item {
    display: flex;
    flex-direction: column;
    .title {
      padding: 32rpx;
    }
  }
}
</style>
